var districtGraphicLayer;
var townGraphicLayer;
var initDistrict

require([
    "dojo/on",
    "esri/SpatialReference",
    "esri/layers/LabelClass", "esri/symbols/TextSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/PictureMarkerSymbol",
    "esri/renderers/SimpleRenderer",
    "esri/renderers/UniqueValueRenderer",
    "esri/layers/GraphicsLayer",
    "esri/layers/FeatureLayer",
    "esri/graphic", "esri/Color",
    "esri/geometry/Point",
    "esri/geometry/Circle",
    "esri/InfoTemplate",
    "dojo/domReady!"
], function (
    on, SpatialReference, LabelClass, TextSymbol, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol,
    SimpleRenderer, UniqueValueRenderer, GraphicsLayer, FeatureLayer, Graphic, Color, Point, Circle, InfoTemplate) {

    initDistrict = function () {
        let districtPanelVisible = false
        $("#districtBtn").click(function (e) {
            $("#districtPanel").toggle()
            districtPanelVisible = !districtPanelVisible
            if (districtPanelVisible) {
                $("#districtBtn")[0].innerHTML = '上海市 <i class="fa fa-caret-up"></i>'
                // $(".districtItem:first").addClass("active")
                map.setExtent(initExtent, true)

                districtGraphicLayer.show()
            } else {
                map.graphics.clear();
                map.infoWindow.hide();
                districtGraphicLayer.hide()
                districtGraphicLayer.setRenderer(districtRender())
                districtGraphicLayer.redraw()
                if (townGraphicLayer) map.removeLayer(townGraphicLayer);
                $(".districtItem").siblings().removeClass("active")
                $("#districtBtn")[0].innerHTML = '上海市 <i class="fa fa-caret-down"></i>'


            }

        })

        const districtArray = ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "浦东新区", "闵行区", "宝山区", "嘉定区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]

        districtArray.forEach(item => {
            const div = $(`<div class="districtItem">${item}</div>`)
            $("#districtPanel").append(div);
        })
        // $(".districtItem:first").addClass("active")


        showDistrict()


        $(".districtItem").click(function (e) {
            var a = $(this)[0].className.indexOf("active")
            const curLabel = this.innerText
            // var d=$("#districtBtn")[0]
            if (a === -1) {
                $(this).addClass("active").siblings().removeClass("active");
                // showDistrict(curLabel)
                // districtGraphicLayer.show()
                showTown(curLabel);
                $("#districtBtn")[0].innerHTML = curLabel + '<i class="fa fa-caret-up"></i>'

            } else {
                $(this).removeClass("active");

                // districtGraphicLayer.hide()
                $("#districtBtn")[0].innerHTML = '上海市' + '<i class="fa fa-caret-up"></i>'
                map.setExtent(initExtent, true)

                districtGraphicLayer.setRenderer(districtRender())
                districtGraphicLayer.redraw()
                // if (districtGraphicLayer) map.removeLayer(districtGraphicLayer);
                if (townGraphicLayer) map.removeLayer(townGraphicLayer);
                map.graphics.clear();
                map.infoWindow.hide();
            }

        })

        $.ajax({
            url: "json/csjDistrict.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {
                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };
                var features = data.features;
                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': [88, 156, 64, 50],
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': [88, 156, 64, 255],
                                    'width': 2
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                window.csjDistrictGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "csjDistrictGraphicLayer",
                    spatialReference: new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // infoTemplate: infoTemplate,
                    visible: false
                });
                map.addLayer(csjDistrictGraphicLayer);
            }
        });

        //增加五大新城的数据情况
        $.ajax({
            url: "json/newCity.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {
                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };
                var features = data.features;
                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': [88, 156, 64, 50],
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': [88, 156, 64, 255],
                                    'width': 2
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                window.newCityDistrictGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "newCityDistrictGraphicLayer",
                    spatialReference: new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // infoTemplate: infoTemplate,
                    visible: false
                });
                map.addLayer(newCityDistrictGraphicLayer);
            }
        });

        //增加虹桥商务区的数据情况
        $.ajax({
            url: "json/hq.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {
                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };
                var features = data.features;
                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': [88, 156, 64, 50],
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': [88, 156, 64, 255],
                                    'width': 2
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                window.hqGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "hqGraphicLayer",
                    spatialReference: new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // infoTemplate: infoTemplate,
                    visible: false
                });
                map.addLayer(hqGraphicLayer);
            }
        });

        //增加；临港新片区的数据情况
        $.ajax({
            url: "json/lingang.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {
                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };
                var features = data.features;
                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': [88, 156, 64, 50],
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': [88, 156, 64, 255],
                                    'width': 2
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                window.lingangGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "lingangGraphicLayer",
                    spatialReference: new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // infoTemplate: infoTemplate,
                    visible: false
                });
                map.addLayer(lingangGraphicLayer);
            }
        });

        //增加；迪士尼的数据情况
        $.ajax({
            url: "json/disney.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {
                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };
                var features = data.features;
                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': [88, 156, 64, 50],
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': [88, 156, 64, 255],
                                    'width': 2
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                window.disneyGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "disneyGraphicLayer",
                    spatialReference: new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // infoTemplate: infoTemplate,
                    visible: false
                });
                map.addLayer(disneyGraphicLayer);
            }
        });

        //增加；花博会的数据情况
        $.ajax({
            url: "json/huabo.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {
                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };
                var features = data.features;
                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': [88, 156, 64, 0],
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': [88, 156, 64, 255],
                                    'width': 2
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                window.huaboGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "huaboGraphicLayer",
                    spatialReference: new SpatialReference({
                        "wkt": 'PROJCS["shanghaicity",' + 'GEOGCS["GCS_Beijing_1954",' + 'DATUM["D_Beijing_1954",' + 'SPHEROID["Krasovsky_1940",6378245.0,298.3]],' + 'PRIMEM["Greenwich",0.0],' + 'UNIT["Degree",0.0174532925199433]],' + 'PROJECTION["Transverse_Mercator"],' + 'PARAMETER["False_Easting",-3457147.81],' + 'PARAMETER["False_Northing",0.0],' + 'PARAMETER["Central_Meridian",121.2751921],' + 'PARAMETER["Scale_Factor",1.0],' + 'PARAMETER["Latitude_Of_Origin",0.0],' + 'UNIT["Meter",1.0]]'
                    }),
                    // infoTemplate: infoTemplate,
                    visible: false
                });
                map.addLayer(huaboGraphicLayer);
            }
        });
    }

    function showDistrict(curLabel) {
        // if (districtGraphicLayer) map.removeLayer(districtGraphicLayer);

        // districtGraphicLayer = {}
        // townGraphicLayer = {}
        // const polygonColor = [125, 125, 125, 0.35];
        // const polygonOutlineColor = [2, 134, 255];
        const districtColor = [125, 125, 125, 0.35];
        // const districtOutlineColor = [255, 152, 0];
        const districtOutlineColor = [2, 134, 255];

        $.ajax({
            url: "json/district.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {
                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };

                var features = data.features;


                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": shanghaiSpatialRef,
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': districtColor,
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': districtOutlineColor,
                                    'width': 2
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                districtGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "districtGraphicLayer",
                    spatialReference: shanghaiSpatialRef,
                    // infoTemplate: infoTemplate,
                    visible: false
                });

                map.addLayer(districtGraphicLayer);
            }
        });


    }

    function districtRender() {
        const districtColor = [125, 125, 125, 0.35];
        // const districtOutlineColor = [255, 152, 0];
        const districtOutlineColor = [2, 134, 255];

        const render = {
            "type": "simple",
            "symbol": {
                'type': 'esriSFS',
                'style': 'esriSFSSolid',
                'color': districtColor,
                'outline': {
                    'type': 'esriSLS',
                    'style': 'esriSLSSolid',
                    'color': districtOutlineColor,
                    'width': 2
                }
            }
        }
        return new SimpleRenderer(render)
    }

    function districtTownRender(name) {
        const districtTownColor = [30, 30, 30, 220];
        const districtTownOutlineColor = [2, 134, 255];

        var uvrJson = {
            type: "uniqueValue",
            field1: "NAME",
            defaultSymbol: {
                color: districtTownColor,
                outline: {
                    color: districtTownOutlineColor,
                    width: 1,
                    type: "esriSLS",
                    style: "esriSLSSolid",
                },
                type: "esriSFS",
                style: "esriSFSSolid",
            },
            uniqueValueInfos: [{
                value: name,
                symbol: {
                    color: [0, 0, 0, 0],
                    outline: {
                        color: [0, 0, 0, 255],
                        width: 1,
                        type: "esriSLS",
                        style: "esriSLSSolid",
                    },
                    type: "esriSFS",
                    style: "esriSFSSolid",
                },
            }, ],
        };
        return new UniqueValueRenderer(uvrJson);
    }

    function showTown(curLabel) {
        const townColor = [125, 125, 125, 0.35];
        // const townOutlineColor = [2, 134, 255];
        const townOutlineColor = [255, 152, 0];
        if (townGraphicLayer) map.removeLayer(townGraphicLayer);
        districtGraphicLayer.setRenderer(districtTownRender(curLabel))
        districtGraphicLayer.redraw()

        $.ajax({
            url: "json/town.json",
            datatype: "json",
            async: false,
            contentType: 'text/json,charset=utf-8',
            data: {},
            success: function (data) {

                // var features = data.features;
                var features = data.features.filter(item => {
                    return item.attributes.DISTRICTNAME == curLabel;
                    // return item.attributes.DISTRICTNAME == "闵行区";
                });

                data.features = features;

                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": data
                };

                featureCollection.layerDefinition = {
                    "geometryType": data.geometryType,
                    "spatialReference": shanghaiSpatialRef,
                    // "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                'type': 'esriSFS',
                                'style': 'esriSFSSolid',
                                'color': townColor,
                                'outline': {
                                    'type': 'esriSLS',
                                    'style': 'esriSLSSolid',
                                    'color': townOutlineColor,
                                    'width': 3
                                }
                            }
                        }
                    }
                };

                featureCollection.layerDefinition.fields = data.fields;

                // var attributes = data.features[0].attributes;
                // var infoTemplate = createInfoTemplate(attributes);
                var infoTemplate = {};

                //街道的注记
                var statesLabel = new TextSymbol().setColor(new Color("#fff")).setHaloSize(0.5).setHaloColor(new Color("#000"));
                statesLabel.font.setSize("12pt");
                statesLabel.font.setWeight(600);
                var labelClass = new LabelClass({
                    "labelExpressionInfo": {
                        "value": "{NAME}"
                    },
                    "labelPlacement": "center-center",
                });
                labelClass.symbol = statesLabel;

                townGraphicLayer = new FeatureLayer(featureCollection, {
                    id: "townGraphicLayer",
                    spatialReference: shanghaiSpatialRef,
                    // infoTemplate: infoTemplate,
                    visible: true
                });
                townGraphicLayer.setLabelingInfo([labelClass]);

                //缩放到对应的街道
                for (let i = 0; i < districtGraphicLayer._graphicsVal.length; i++) {
                    if (districtGraphicLayer._graphicsVal[i].attributes.NAME === curLabel) {
                        map.setExtent(districtGraphicLayer._graphicsVal[i]._extent, true)
                        break
                    }
                }


                map.addLayer(townGraphicLayer, 1);

            }
        });
    }
})